<template>
  <div class="home">
    <Title :render="render"></Title>
    <div class="main" style="padding: 15px;">
      <div>
        <h3 style="display: flex;justify-content: space-between;margin-bottom: 10px;"><span>正在进行</span><span>{{
          progress.length }}</span></h3>
        <ul class="list">
          <li v-for="item in progress" :key="item.id">
            <div style="display: flex;">
              <div style="margin-right: 10px;">
                <input type="checkbox" v-model="item.flag" @change="overs(item.id)">
              </div>
              <div>
                {{ item.name }}
              </div>
            </div>
            <div @click="deletes(item.id)">×</div>
          </li>
        </ul>
      </div>
      <div>
        <h3 style="display: flex;justify-content: space-between;margin-bottom: 10px;"><span>已经完成</span><span>{{
          over.length }}</span></h3>
        <ul class="list">
          <li v-for="item in over" :key="item.id">
            <div style="display: flex;">
              <div style="margin-right: 10px;">
                <input type="checkbox" v-model="item.flag" @change="noovers(item.id)">
              </div>
              <div>
                {{ item.name }}
              </div>
            </div>
            <div @click="deletes(item.id)">×</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getList, changestatus,delList } from '@/api/list'
import { ElMessage, ElMessageBox } from 'element-plus'
let progress: any = ref([])
let over: any = ref([])
const render = () => {
  getList().then(res => {
    progress.value = res.data.filter((item:any)=>item.flag == false)
    over.value = res.data.filter((item:any)=>item.flag == true)
  })
}
onMounted(() => {
  render()
})
const overs = (id: number) => {
  let obj = progress.value.find((item: any) => item.id == id)
  obj.flag = true
  changestatus(obj.id, obj).then(res => {
    render()
  })
}
const noovers = (id: number) => {
  let obj = over.value.find((item: any) => item.id == id)
  obj.flag = false
  changestatus(obj.id, obj).then(res => {
    render()
  })
}
const deletes=(id:number)=>{
  ElMessageBox.confirm(
    '确认删除该条信息?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      delList(id).then(res=>{
        render()
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
</script>

<style>
.home {
  width: 700px;
  margin: 0 auto;
  padding: 10px;

  .title {
    display: flex;
    background-color: #323232;
    color: white;
    line-height: 50px;
    padding: 0px 10px;
    justify-content: space-between;
  }
}
</style>